<template>
	<view style="height:  750rpx">
		<l-f2 ref="chart"></l-f2>
	</view>
</template>

<script>
	import F2 from '@antv/f2';
	export default {
		data() {
			return {
				data: [{
					day: '二月',
					value: 300
					}, {
					day: '三月',
					value: 400
					}, {
					day: '四月',
					value: 350
					}, {
					day: '五月',
					value: 500
					}, {
					day: '六月',
					value: 490
					}, {
					day: '七月',
					value: 600
					}, {
					day: '八月',
					value: 900
				}]
			}
		},
		mounted() {
			this.$refs.chart.init(config => {
				const chart = new F2.Chart(config);
				chart.source(this.data, {
					value: {
						tickCount: 5,
						min: 0
					},
					day: {
						range: [ 0, 1 ]
					}
				});
				chart.tooltip({
					showCrosshairs: true,
					showItemMarker: false,
					onShow: function onShow(ev) {
						const items = ev.items;
						items[0].name = null;
						items[0].value = ' ' + items[0].value;
					}
				});
				chart.axis('day', {
				label: function label(text, index, total) {
					const textCfg = {};
					if (index === 0) {
						textCfg.textAlign = 'left';
					} else if (index === total - 1) {
						textCfg.textAlign = 'right';
					}
					return textCfg;
				}
				});
				chart.line().position('day*value');
				chart.point().position('day*value').style({
					stroke: '#fff',
					lineWidth: 1
				});
				chart.render();
				// 显露默认选中
				const point = chart.getPosition(this.data[1])
				chart.showTooltip(point)
				return chart;
			});
		}
	}
</script>